<script setup>
/**
 * @import libs
 */
import { ref } from 'vue';
import md5 from "js-md5";

/**
 * 用户名
 */
const username = ref('');

/**
 * 密码
 */
const password = ref('');

/**
 * 错误信息
 */
const errorMessage = ref('');

/**
 * 默认登入账户名
 */
const defaultUsername = 'szc';

/**
 * 盐
 */
const salt = 'szcyyds';

/**
 * 加密密码 默认不改变盐值为 yyds
 */
const encryptPassword = "40ad92c177254ff9f75c79c30a7a43f2"

/**
 * 点击登录
 */
const handleLogin = () => {
    // 加密密码
    const md5Password = md5.hmac.hex(password.value,salt);

    // 模拟登录逻辑
    if (username.value === defaultUsername && md5Password === encryptPassword) {
        // 登录成功，跳转到主页或其他页面
        uni.showToast({
            title: '登录成功',
            icon: 'success',
        });
        uni.setStorageSync('isLogin', true);
        // 跳转到主页
        uni.navigateTo({
            url: '/pages/index/index',
        });
    } else {
        errorMessage.value = '用户名或密码错误';
    }
};

/**
 * 点击忘记密码
 */
const handleForgotPassword = () => {
    // 忘记密码的逻辑
    uni.showToast({
        title: '忘记密码功能尚未实现',
        icon: 'none',
    });
};

/**
 * 点击注册账号
 */
const handleRegister = () => {
    // 注册账号的逻辑
    uni.showToast({
        title: '注册账号功能尚未实现',
        icon: 'none',
    });
};

</script>

<template>
    <view class="login-container">
        <image src="@/static/imgs/login_img.png" class="profile-image" mode="aspectFit" />
        <text class="title">欢迎登录</text>
        <input v-model="username" type="text" placeholder="请输入用户名" class="input-field" />
        <input v-model="password" type="password" placeholder="请输入密码" class="input-field" />
        <button @click="handleLogin" class="login-button">登录</button>
        <text class="error-message" v-if="errorMessage">{{ errorMessage }}</text>
        <view class="links">
            <text class="link" @click="handleForgotPassword">忘记密码？</text>
            <text class="link" @click="handleRegister">注册账号</text>
        </view>
    </view>
</template>



<style>
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #ffefe1;
    /* 修改背景色 */
}

.profile-image {
    width: 300rpx;
    /* 设置宽度 */
    height: 300rpx;
    /* 设置高度 */
    border-radius: 30%;
    /* 使图片圆形 */
    margin-bottom: 20px;
    /* 与标题之间的间距 */
}

.title {
    font-size: 24px;
    margin-bottom: 20px;
}

.input-field {
    width: 80%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-button {
    width: 80%;
    padding: 10px;
    background-color: #cc8118;
    /* 修改按钮颜色 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-button:hover {
    background-color: #b36816;
    /* 鼠标悬停颜色 */
}

.error-message {
    color: red;
    margin-top: 10px;
}

.links {
    margin-top: 20px;
}

.link {
    color: #007AFF;
    /* 链接颜色 */
    margin-right: 15px;
    cursor: pointer;
}
</style>